<template>
	<view id="app">
		<view class="title">{{ showTextList[result].title }}</view>
		<view class="container" :style="{ top: windowSize.height * 0.05 + 'px' }">
			<!-- 转盘 -->
			<view class="circle" :animation="animationData">
				<view class="lines">
					<view v-for="(item, index) in lineList" :key="index" :style="{ transform: 'rotate(' + item.rotateDeg + 'deg)' }"></view>
				</view>

				<view class="texts">
					<view v-for="(item, index) in showTextList" :key="index" :style="{ transform: 'rotate(' + item.rotateDeg + 'deg)' }">
						{{ item.title }}
					</view>
				</view>
			</view>
			<!-- 指针 -->
			<view class="pointer">
				<view
					class="pointer-triangle"
					:style="{
						borderBottomWidth: windowSize.width / 14 + 'px',
						borderRightWidth: windowSize.width / 30 + 'px',
						borderLeftWidth: windowSize.width / 30 + 'px'
					}"
				></view>
				<view
					class="pointer-circle"
					@click="startLottery"
					:style="{
						width: windowSize.width / 12 + 'px',
						height: windowSize.width / 12 + 'px'
					}"
				>
					GO
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			windowSize: {},
			lineList: [],
			showTextList: [],
			isClicked: false,
			animationData: {},
			lastResult: 0,
			result: 0,
			deg: 0
		};
	},
	onLoad() {
		this.initData();
	},
	mounted() {
		this.windowSize = this.getWindowSize();
	},
	methods: {
		/* 获取屏幕可用尺寸 */
		getWindowSize() {
			const windowInfo = uni.getWindowInfo();
			let availableWindowSize = {
				width: 0,
				height: 0
			};
			availableWindowSize.width = windowInfo.windowWidth; //px
			availableWindowSize.height = windowInfo.windowHeight; //px
			// console.log("windowSize", this.windowSize);
			return availableWindowSize;
		},
		// 初始化数据
		initData() {
			this.lineList = [
				{
					rotateDeg: 0
				},
				{
					rotateDeg: 60
				},
				{
					rotateDeg: 120
				}
			];
			// 文字要逆时针旋转
			this.showTextList = [
				{
					title: '1:跑步',
					rotateDeg: 0
				},
				{
					title: '2:游泳',
					rotateDeg: -60
				},
				{
					title: '3:666',
					rotateDeg: -120
				},
				{
					title: '4:打拳',
					rotateDeg: -180
				},
				{
					title: '5:剑道',
					rotateDeg: -240
				},
				{
					title: '6:play piano',
					rotateDeg: -300
				}
			];
		},
		/* 开始旋转抽奖 */
		startLottery() {
			if (this.isClicked) {
				//已经点击了
				console.log('点击太频繁啦');
				return;
			}
			this.isClicked = true;

			let animation = uni.createAnimation({
				transformOrigin: '50% 50%',
				duration: 2000,
				timingFunction: 'ease-in-out',
				delay: 0
			});
			this.animationData = animation;
			this.animationData.rotate(this.randomNum()).step();
			this.animationData = this.animationData.export();

			setTimeout(() => {
				this.isClicked = false;
			}, 2000);
		},
		/* 获取随机数 */
		randomNum() {
			this.result = Math.floor(Math.random() * 6); //数组索引：[0,5]
			if (this.result > this.lastResult) {
				this.deg += 360 * 4 + (this.result - this.lastResult) * 60;
			} else {
				this.deg += 360 * 4 + 360 - (this.lastResult - this.result) * 60;
			}
			// console.log(`result:${this.result},deg:${this.deg}`);
			this.lastResult = this.result;

			return this.deg;
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	text-align: center;
}
.container {
	position: relative;
	width: 100%;
	/* background: rgba(87, 189, 106, 0.5); */
	border: 1rpx solid skyblue;
}

.circle {
	position: relative;
	margin: auto;
	width: 400rpx;
	height: 400rpx;
	border-radius: 50%;
	border: 20rpx solid goldenrod;
	background: rgba(0, 112, 46, 0.8);
}

.lines {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.lines > view {
	display: inline-block;
	width: 100%;
	height: 1%;
	position: absolute;
	transform-origin: center center;
	background-color: #f5b362;
}

.texts {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
}

.texts view {
	display: inline-block;
	height: 96%;
	color: white;
	position: absolute;
	writing-mode: vertical-lr;
	transform-origin: center center;
	/* background-color: #bd2d30; */
}

.pointer {
	position: absolute;
	margin: auto;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/* border: 5rpx solid yellow; */
}

.pointer-triangle,
.pointer-circle {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
}

.pointer-triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-top-width: 0px;
	border-color: transparent transparent #bd2d30 transparent;
	transform: translate(-50%, -100%);
}

.pointer-circle {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	color: white;
	font-weight: bold;
	background: #bd2d30;
}
</style>
